<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 组件的定义
    // 组件具备复用性
    // 全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单
    // 局部组件,定义了,要注册之后才能使用,性能比较高,使用起来有些麻烦,建议大写字母开头,驼峰式命名法
    // 局部组件使用时,要做一个名字和组件间的映射对象,你不写映射,vue底层也会自动尝试帮你做映射
    const counters={
        data(){
            return{
                count:1,
            }
        },
        template:`<div @click="count += 1">{{count}}</div>`
    }
    const app = Vue.createApp({
        components:{
            counters:counters,
        },
        template:`
        <div>
            <hello />
            <world />
            <counter />
            <counters />
        </div>
        `
    });
    app.component('hello',{
        template:`<div>hello</div>`
    });
    app.component('world',{
        template:`<div>world</div>`
    });
    app.component('counter',{
        data(){
            return{
                count:1,
            }
        },
        template:`<div @click="count += 1">{{count}}</div>`
    });
    const vm = app.mount('#root')
</script>